<template>
  <div id="book_manage">
    <el-button class="book_manage_add" type="primary" @click="isShowAddDialog=!isShowAddDialog">添加图书</el-button>
    <el-table
        :data="bookList"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="name"
          label="图书标题"
          width="150">
      </el-table-column>
      <el-table-column
          prop="author"
          label="图书作者"
          width="120">
      </el-table-column>
      <el-table-column
          prop="info"
          label="图书信息"
          >
      </el-table-column>
      <el-table-column
          prop="press"
          label=" 出版社"
          width="120">
      </el-table-column>
      <el-table-column
          prop="price"
          label="图书价格"
          width="100">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="success">编辑</el-button>
          <el-button type="danger" @click="deleteBook(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页器  -->
    <el-pagination class="pagination"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPageNumber"
        @current-change="currentChange">
    </el-pagination>

    <!--  添加图书的对话框  -->
    <el-dialog title="添加图书" :visible.sync="isShowAddDialog">
      <!--   显示添加图书的子组件   -->
      <AddBookMask @onCancel="onCancel"/>
    </el-dialog>

    <!--   显示更新图书的子组件   -->
    <el-dialog title="更新图书" :visible.sync="isShowUpdateDialog">
      <UpdateBookMask :book-obj="currentBookObj" @onCancel="onCancel"/>
    </el-dialog>
  </div>
</template>

<script>

import  {bookAll,deleteBookByIsbn,findBookByLimit} from "../../../../network/book";
import AddBookMask from "./AddBookMask";
import UpdateBookMask from "./UpdateBookMask";

export default {
  name: "bookManage",
  components: {UpdateBookMask, AddBookMask},
  data(){
    return{
      bookList:[],
      isShowAddDialog:false,
      isShowUpdateDialog:false,
      currentBookObj:{},
      total:0,//用于保存全部的数据
      currentPageNumber:1,//当前的页数
    }
  },
  created() {
    //获取全部的图书,只是为了显示有多少页.
    //并且赋值total中,然后通过length来把分页器加载出来
    bookAll().then((result)=>{
      console.log(result);
      this.total=result.data.data.length;
    }).catch((reason)=>{
      console.log(reason);
    });
    //接下来是分页, bookList保存的就是当前页的图书列表
    //这里我们固定让数据每次显示 10 条
    findBookByLimit(0,10).then((result)=>{
      console.log(result);
      this.bookList=result.data.data;
    }).catch((reason)=>{
      console.log(reason);
    })
  },
  methods: {
    //单击编辑按钮时触发
    handleClick(row) {
      console.log(row);
      this.currentBookObj=row;
      this.isShowUpdateDialog=!this.isShowUpdateDialog;
    },
    //单击分页器按钮时触发
    currentChange(size){//单击分页,别忘记重新请求数据
      if (size!==this.currentPageNumber){
        this.currentPageNumber=size;
        findBookByLimit((this.currentPageNumber-1)*10,10).then((result)=>{
          console.log(result);
          this.bookList=result.data.data;
        }).catch((reason)=>{
          console.log(reason);
        })
      }
    },
    //子组件单击关闭按钮时关闭弹窗
    onCancel(){
      this.isShowAddDialog=false;
      this.isShowUpdateDialog=false;
    },
    //删除书籍事件
    deleteBook(bookObj){
      deleteBookByIsbn(bookObj.isbn).then((result)=>{
        console.log(result);
        if (result.data.code===200){
          this.$message({
            message: '删除图书成功!',
            type: 'success'
          });
          //跳转空白页,更新数据
          sessionStorage.setItem('sixthUrl','/admin/page/bookmanage');
          this.$router.push('/blankPage');
        }
      }).catch((reason)=>{
        console.log(reason);
      })
    },
  },
}
</script>

<style scoped>
.book_manage_add{
  width: 50%;
  line-height: 30px;
  margin: 10px ;
  font-size: 20px;
  border: 2px solid transparent;
}
.book_manage_add:hover{
  border: 2px solid orangered;
}
/*分页器样式*/
.pagination{
  margin-top: 15px;
}
</style>
